<template>
  <div>
    <div class="header">
      社区团购系统-后台管理
      <span class="logout" @click="logout">退出</span>
    </div>
    <ul id="nav2">
      <li @click="$router.push('/adminhome/product')">商品管理</li>
      <li @click="$router.push('/adminhome/users')">用户管理</li>
      <li @click="$router.push('/adminhome/order')">订单管理</li>
      <li @click="$router.push('/adminhome/leader')">团长管理</li>
      <li @click="$router.push('/adminhome/log')">系统管理</li>
    </ul>
    <router-view/>
  </div>
</template>

<script>

export default {
  name: "AdminHome",
  mounted() {
    this.menuBindStyle()
  },
  watch: {
    "$route": "menuBindStyle"
  },
  methods: {
    menuBindStyle() {
      function removeActiveClass(node) {
        node.className = ''
      }
      let menus = document.querySelectorAll('#nav2 li')
      Array.prototype.forEach.call(document.querySelectorAll('#nav2 li'), removeActiveClass);
      let routerPath = this.$route.path.slice(10)
      const path = ['/product','/users','/order','/leader','/log']
      menus[path.indexOf(routerPath)].className = 'active'
      // menus.forEach(function (value, index) {
      //   value.addEventListener('click', function (e) {
      //     const target = e.target;
      //     target.className = 'active';
      //   })
      // })
    },
    async logout() {
      sessionStorage.removeItem('admin')
      window.close()
    }
  }
}
</script>

<style scoped lang="less">
.header {
  height: 50px;
  background-color: #4d4552;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  .logout {
    float: right;
    font-size: 14px;
    margin-right: 10px;
    cursor: pointer;
  }
}
ul{
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  list-style: none;
  background-color: #b7a8a1;
}
ul > li {
  padding: 6px 16px;
  margin: 0 5px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
ul > li:last-child{
  border-right: none;
}
li:hover, li:focus, .active {
  color: #fff;
  border-bottom: 1px solid #fff;
}

</style>
